{% extends 'base.html' %}

{% block body %}

{% embed 'view-edit.html' %}
  {% block createnew %}
  {% include 'catstat-view-edit.html' %}
  <div class='d-flex'>
    <div class='align-self-center flex-grow-1 mr-2'>
      {# CUSTOM ID #}
      {# TITLE #}
      <h1 class='text-dark' >
        {% if Entity.entityData.custom_id %}
          <span title='{{ 'Custom ID'|trans }}' class='color-medium'>{{ Entity.entityData.custom_id }}</span>
        {% endif %}
         <!-- [html-validate-disable-block prefer-native-element: suppress error from malle] -->
        <span id='documentTitle' class='breakable {{ not Entity.isReadOnly ? 'malleableTitle hl-hover-gray' }} rounded py-1' data-target='title' data-endpoint='{{ Entity.entityType.value }}' data-id='{{ Entity.id }}'>{{ Entity.entityData.title }}</span>
      </h1>
    </div>
    <div class='ml-auto'>
      {% include 'create-new.html' %}
    </div>
  </div>
  {% endblock %}
  {% block createmodal %}
    {% include 'show-view-edit.html' %}
  {% endblock %}
{% endembed %}

{# Exclusive edit mode notification #}
<div id='exclusiveEditModeInfo'>
  {% if Entity.entityData.exclusive_edit_mode.locked_by > 0 and Entity.entityData.exclusive_edit_mode.locked_by != App.Users.userid and not Entity.entityData.exclusive_edit_mode.is_stale %}
  {% macro writeLockNotice(locked_by_human) %}
  {{ 'This entry is being edited by %s.'|trans|format(locked_by_human) }}
      <button type='button' class='btn btn-sm btn-secondary' data-action='override-exclusive-edit-lock'>{{ 'Override lock'|trans }}</button>
  {% endmacro %}
  {{ _self.writeLockNotice(Entity.entityData.exclusive_edit_mode.locked_by_human)|msg('warning', false) }}
{% endif %}
</div>

{% include('view-edit-toolbar.html') %}

<div id='isTimestampedByInfoDiv'>
{% if Entity.entityData.timestamped %}
  {{ 'Entry was timestamped by %s on %s at %s'|trans|format(timestamperFullname, Entity.entityData.timestamped_at|date('Y-m-d'), Entity.entityData.timestamped_at|date('H:i:s'))|msg('ok', false) }}
{% endif %}
</div>

{% if Entity.entityData.locked %}
  {{ 'Locked by %s on %s at %s'|trans|format(lockerFullname, Entity.entityData.locked_at|date('Y-m-d'), Entity.entityData.locked_at|date('H:i:s'))|msg('ok', false) }}
{% endif %}

<section>

  {# DATE #}
  {% if Entity.entityType.value != 'experiments_templates' %}
    <div class='color-medium mb-2'>
      {{ 'Started on'|trans }} {{ Entity.entityData.date|date('Y-m-d') }}
    </div>
  {% endif %}

  {# OWNER #}
  <div class='d-flex mb-2 align-items-center'>
    <div class='edit-mode-label'>
      <i aria-hidden='true' class='fas fa-fw fa-user mr-1'></i>{{ 'Owner'|trans }}
    </div>
    {{ Entity.entityData.fullname }}
  </div>

  {# TEAM #}
  <div class='d-flex mb-2 align-items-center'>
    <div class='edit-mode-label'>
      <i aria-hidden='true' class='fas fa-fw fa-users mr-1'></i>{{ 'Team'|trans }}
    </div>
    {{ Entity.entityData.team_name }}
  </div>

  {# TAGS #}
  <div class='d-flex mb-2 align-items-center'>
    {% if Entity.entityData.tags|length > 0 %}
      <div class='edit-mode-label'>
        <i class='fas fa-tags mr-1'></i>{{ 'Tags'|trans }}
      </div>
      <span class='tags mathjax-ignore d-flex-inline flex-wrap'>
        {% for tag in Entity.Tags.readAll() %}
        <a class='tag btn {{- tag.is_favorite ? ' favorite' }}' href='?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}' aria-label='{{ tag.tag }}'>{{ tag.tag }}</a>
        {% endfor %}
      </span>
    {% endif %}
  </div>

  <hr>

  {# SHOW EVENTS #}
  {% if Entity.entityData.type == 'items' and Entity.entityData.is_bookable == 1 %}
    {% if Entity.entityData.events_start %}
      <div class='d-flex align-content-center'>
        <div>
          <i class='far fa-fw fa-calendar-alt'></i>
          {% set splitItemids = Entity.entityData.events_start_itemid|split('|') %}
          {% for event in Entity.entityData.events_start|split('|') %}
            <a href='scheduler.php?items[]={{ splitItemids[loop.index - 1] }}&amp;start={{ event|url_encode }}' class='mx-1 btn btn-neutral relative-moment'  title='{{ event|date('Y-m-d H:i:s') }}' aria-label='{{ event|date('Y-m-d H:i:s') }}'></a>
          {% endfor %}
        </div>
      </div>
      <hr>
    {% endif %}
  {% endif %}

  {# SHOW NEXT STEP #}
  {% set next_step = Entity.entityData.next_step %}
  {% if next_step|length > 0 %}
      {% set nextStepsArr = next_step|split('|') %}
      {% set next = nextStepsArr|first %}
      <p>
      <span class='next-step-text'>{{ 'Next step'|trans }}:</span> <span class='text-dark'>{{ next }}</span>
      </p>
  {% endif %}

  {# BODY (show only if not empty) #}
  {% set body = Entity.entityData.body_html %}
  {% if body != '' %}
      {# do not display body if set in metadata, done via css to avoid delayed disappearance after JS is executed #}
      {# body in view mode is text-dark for more lisibility see github issue #52 #}
      <div {{ not displayMainText ? 'hidden' }}>
        <h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='body_view'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Main text'|trans }}</h3>
        <div id='body_view' class='pt-2 ml-3 text-dark overflow-auto' data-save-hidden='body_view'>{{ body|raw }}</div>
        <hr>
      </div>
  {% endif %}

</section>

{# METADATA view #}
{% if Entity.entityData.metadata %}
  <h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='extraFieldsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Extra fields'|trans }}</h3>
  <div class='mt-2 col-md-8' id='extraFieldsDiv' data-save-hidden='extraFieldsDiv'>
    {{ Entity.entityData.metadata|formatMetadata }}
  </div>
  <hr>
{% endif %}

{% include 'uploads.html' %}

{% include 'steps-view.html' %}

{% include 'links.html' %}

{% include 'storage-view-edit.html' %}

{# PERMISSIONS #}
<h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='permissionsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Permissions'|trans }}</h3>
<div class='mt-2 ml-3' id='permissionsDiv' data-save-hidden='permissionsDiv'>
  {% include('edit-permissions.html') %}
</div>
<hr>


{% if App.Session.get('is_auth') and not App.Session.has('is_anon') %}
  <h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='commentsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Comments'|trans }} (<span id='commentsCount'>{{ Entity.entityData.comments|length }}</span>)</h3>
  <div class='mt-2' id='commentsDiv' data-count-for='commentsCount' data-save-hidden='commentsDiv'>
      {% for comment in Entity.entityData.comments %}
        <div class='box countable'>
          <div class='comment-header text-muted p-2'>
            {{ comment.fullname }} {{ 'commented'|trans }}
            <span title='{{ comment.created_at }}' class='relative-moment'></span>
            {% if comment.created_at != comment.modified_at %}
              ({{ 'edited'|trans }} <span title='{{ comment.modified_at }}' class='relative-moment'></span>)
            {% endif %}
            {% if comment.userid == Entity.Users.userData.userid and comment.immutable == 0 %}
              <button type='button' class='btn float-right lh-normal border-0 m-0 p-2 my-n2 hl-hover-gray' data-action='destroy-comment' data-id='{{ comment.id }}' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}'>
                <i class='fas fa-fw fa-trash-alt fa-lg'></i>
              </button>
            {% endif %}
          </div>
          {# the comment itself is only editable by the owner #}
          <p class='comment m-2 p-2 {{ comment.userid == Entity.Users.userData.userid and comment.immutable == 0 ? "editable hl-hover" }}' data-id='{{ comment.id }}'>{{ comment.comment|nl2br }}</p>
        </div>
      {% endfor %}

      {# CREATE COMMENT INPUT #}
      <div class='input-group my-1 rounded'>
        <textarea id='commentsCreateArea' class='form-control p-2 brr-none' autocomplete='off' placeholder='{{ 'Add a comment'|trans }}' aria-label='Comment area'></textarea>
        <div class='input-group-append'>
          <button class='btn btn-primary' aria-label='{{ 'Add a comment'|trans }}' type='button' data-action='create-comment'><i class='fas fa-paper-plane text-white'></i></button>
        </div>
      </div>
    </div>
{% endif %}
{# STATIC INFO #}
<hr>
<div class='d-flex flex-column align-items-end'>
  {# SHOW LAST MOD #}
  <div>{{ 'Last modified on %s'|trans|format(Entity.entityData.modified_at) }}</div>
  {# eLabID: add an if because templates don't have one #}
  {% if Entity.entityData.elabid %}
    <div class='elabid'>{{ 'Unique eLabID:'|trans }} {{ Entity.entityData.elabid }}</div>
  {% endif %}
</div>

{% if Entity.entityData.state == enum('Elabftw\\Enums\\State').Deleted.value %}
  <div class='entity-deleted-overlay'>
    <p>{{ 'This entry has been deleted.'|trans }}</p>
    <button data-action='restore' type='button' class='btn btn-primary mb-2' data-id='{{ Entity.entityData.id }}'>{{ 'Restore entry'|trans }}</button>
    {% include 'back-to-previous.html' with {'type': 'btn'} %}
  </div>
{% endif %}

<div id='info'
    data-page='view'
    data-type='{{ Entity.entityType.value }}'
    data-id='{{ Entity.id }}'
    data-team='{{ App.Users.userData.team }}'
>
</div>

{% endblock body %}
